<template>
  <van-cell center title="智能推荐" style="padding-top: 56px">
    <template #right-icon>
      <van-switch v-model="isMatchMode"/>
    </template>
  </van-cell>
  <van-skeleton :row="30" :loading="loading" >
    <van-card
        v-for="user in userList"
        :desc="user.userAccount"
        :title="user.nickName"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 4px">{{ tag }}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">联系我</van-button>
      </template>
    </van-card>
    <van-empty style="padding-top: 156px;" v-if="userList.length<1" description="没有推荐？刷新试试吧！"/>
  </van-skeleton>
</template>

<script setup lang="ts">
import {ref, watchEffect} from 'vue';
import {useRoute} from "vue-router";
import myAxios from '../plugins/myAxios';
import qs from 'qs';
import {userType} from "../model/user";
// interface UserCardListProps {
//   loading: boolean;
//   userList: userType[];
// }
const userList = ref<userType[]>([]);

//开关
const isMatchMode = ref<boolean>(false);
//加载动画
const loading = ref<boolean>(false);

//路由
const route = useRoute()

const loadData = async () => {
  loading.value = true;
//心动模式
  if (isMatchMode.value) {
    console.log(isMatchMode.value)
    const userListData: userType[] = await myAxios.get('/match', {
      withCredentials: true,
      params: {
        num: 5,
      },
      paramsSerializer: params => {
        return qs.stringify(params, {indices: false})
      }
    })
        .then(function (response) {
          console.log('/user/recommend 请求成功', response);
          return response.data;
        })
        .catch(function (error) {
          console.error('/user/recommend 请求失败', error);
        })
        .finally(function () {
          // 总是会执行
        })
    if (userListData) {
      userListData.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags)
        }
      })
      loading.value = false;
      userList.value = userListData
    }
  } else {
    //普通模式
    const userListData: userType[] = await myAxios.get('/recommend', {
      withCredentials: true,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      paramsSerializer: params => {
        return qs.stringify(params, {indices: false})
      }
    })
        .then(function (response) {
          console.log('/user/recommend 请求成功', response);
          return response.data?.records;
        })
        .catch(function (error) {
          console.error('/user/recommend 请求失败', error);
        })
        .finally(function () {
          // 总是会执行
        })

    if (userListData) {
      userListData.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags)
        }
      })
      loading.value = false;
      userList.value = userListData
    }
  }
}

watchEffect(() => {
  loadData();
})

console.log(route);

// const mockUser = {
//   id: 12334,
//   userName: '郭佳宏',
//   userAccount: 'meidaoli',
//   avatarUrl: '11',
//   gender: '男',
//   phone: '12344',
//   email: '12323',
//   userStatus: 1,
//   userRole: 1,
//   tags: ['nan', '内部'],
//   createTime: new Date()
//
// }


</script>

<style scoped>


</style>
